<script>
import ip from 'ip'
import { start, close, info } from 'services/x-start/mgr/device'
import { realTimeInfo } from 'services/x-start/mgr/spread'

export default {
  props: {
    id: {
      type: String,
      default: 'my-video',
    },
    item: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      isClose: false,
      myPlayer: null,
      fullPlayer: null,
      info: {},
      url: null,
      dialogVisible: false,
    }
  },
  created() {
    this.playRtsp()
    if (this.item.id) {
      this.getInfo()
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('beforeunload', (e) =>
        this.beforeunloadHandler(e)
      )
    })
  },
  computed: {
    rtspUrl() {
      if (!process.env.VUE_APP_RTSP_URL) {
        return ip.address()
      }
      return process.env.VUE_APP_RTSP_URL.replace('http://', '').replace(
        ':8088',
        ''
      )
    },
  },
  methods: {
    dblclick() {
      this.dialogVisible = true
      this.$nextTick(() => {
        this.fullPlayer = new JSMpeg.Player(this.url, {
          canvas: this.$refs.fullCanvas,
          preserveDrawingBuffer: true,
        })
      })
    },
    beforeunloadHandler(e) {
      this.close()
    },
    handleClose() {
      this.dialogVisible = false
    },
    close(type) {
      close({ url: this.item.path }).catch(({ payload }) => {
        console.log(payload.message)
      })
      clearTimeout(this.timer)
      try {
        this.myPlayer.destroy()
        this.myPlayer = null
      } catch (error) {}
    },
    playRtsp() {
      start({ url: this.item.path })
        .then(({ port }) => {
          this.canvas = this.$refs.rtspCanvas
          this.url = `ws://${this.rtspUrl}:${port}`
          this.myPlayer = new JSMpeg.Player(this.url, {
            canvas: this.canvas,
            chunkSize: 4 * 1024 * 1024,
            preserveDrawingBuffer: true,
          })
        })
        .catch(({ payload }) => {
          this.$message.error(
            payload ? payload.message : '启动本地解码功能失败！'
          )
          this.isClose = true
          this.close()
        })
    },
    getInfo() {
      realTimeInfo(this.item.id)
        .then((res) => {
          this.info = res.data
          if (res.data != null) {
            this.timer = setTimeout(() => {
              this.getInfo()
            }, 1000)
          }
        })
        .catch((res) => {
          console.log('链接失败')
        })
    },
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', (e) =>
      this.beforeunloadHandler(e)
    )
  },
}
</script>

<template lang="pug">
.rtsp
  el-dialog(
    :title='item.name',
    :visible.sync='dialogVisible',
    v-if='dialogVisible',
    width='640px',
    top='20vh',
    :before-close='handleClose'
  )
    canvas.fullCanvas(ref='fullCanvas', width='600px', height='400px')
    span.dialog-footer(slot='footer')
      el-button(@click='handleClose', size='mini') 关闭
  ul.info(v-if='info')
    li {{ item.name }}
    li 现场：{{ Math.abs(info.now || 0) }}
    li 入场：{{ info.ent }}
    li 出场：{{ info.ext }}
  canvas.rtspCanvas(ref='rtspCanvas', @dblclick='dblclick')
</template>

<style lang="stylus" scoped>
.rtsp
  >>>.el-dialog
    background-color #222
    .el-dialog__title
      color #c1c1c1
  >>>.el-dialog__body
    padding 0 20px
  .dialog-footer
    .el-button
      color #fff
      background-color #3e3e3e
      border none
  height 100%
  position relative
  .rtspCanvas
    width 100%
    height 100%
  .info
    background rgba(62, 40, 18, 0.8)
    font-size 12px
    color #fff
    padding 5px 10px
    display flex
    position absolute
    width 100%
    box-sizing border-box
    top 0
    justify-content space-between
</style>
